<template>
  <view class="login-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <text class="navbar-title">数字家庭</text>
      </view>
    </view>
    
    <!-- 登录内容 -->
    <view class="login-content">
      <!-- Logo和标题 -->
      <view class="header-section">
        <!-- <image class="app-logo" :src="defaultImages.logo" mode="aspectFit"></image> -->
        <text class="app-title">数字家庭</text>
        <text class="app-subtitle">家族共享相册与互动平台</text>
      </view>
      
      <!-- 登录表单 -->
      <view class="form-section">
        <view class="welcome-text">
          <text class="welcome-title">账号登录</text>
          <text class="welcome-subtitle">请输入您的账号信息</text>
        </view>
        
        <!-- 账号密码登录 -->
        <view class="account-login-section">
          <view class="form-item">
            <input 
              class="form-input" 
              v-model="accountForm.username" 
              placeholder="请输入手机号/邮箱/用户名"
              maxlength="50"
            />
          </view>
          
          <view class="form-item">
            <input 
              class="form-input" 
              v-model="accountForm.password" 
              placeholder="请输入密码"
              password
              maxlength="20"
            />
          </view>
          
          <view class="login-actions">
            <button 
              class="login-button" 
              :class="{ 'loading': accountLoginLoading }" 
              :disabled="accountLoginLoading"
              @click="handleAccountLogin">
              {{ accountLoginLoading ? '登录中...' : '登录' }}
            </button>
            
            <!-- 测试按钮 -->
            <!-- <button 
              class="test-button" 
              @click="quickLogin"
              style="margin-top: 20rpx; background-color: #67c23a;">
              快速登录测试
            </button> -->
          </view>
          
          <!-- <view class="forgot-password" @click="handleForgotPassword">
            <text class="forgot-text">忘记密码？</text>
          </view> -->
        </view>
        
        <!-- 注册链接 -->
        <view class="register-link" @click="goToRegister">
          <text class="register-text">还没有账号？立即注册</text>
        </view>
      </view>
      
      <!-- 用户协议 -->
      <view class="agreement-section">
        <view class="agreement-checkbox" @click="toggleAgreement">
          <view class="custom-checkbox" :class="{ checked: agreedToTerms }">
            <text class="checkbox-icon">{{ agreedToTerms ? '✓' : '' }}</text>
          </view>
          <text class="agreement-text">
            我已阅读并同意
            <text class="link-text" @click.stop="showAgreement('privacy')">《隐私政策》</text>
            和
            <text class="link-text" @click.stop="showAgreement('terms')">《用户协议》</text>
          </text>
        </view>
      </view>
    </view>
    

  </view>
</template>

<script>
import { mapActions } from 'vuex'
import { defaultImages } from '@/utils/defaultImages'

export default {
  name: 'LoginPage',
  data() {
    return {
      statusBarHeight: 0,
      accountLoginLoading: false,
      agreedToTerms: false,
      accountForm: {
        username: '',
        password: ''
      },
      defaultImages
    }
  },
  
  computed: {
    // 可以添加表单验证计算属性
  },
  
  onLoad() {
    this.getSystemInfo()
  },
  
  methods: {
    ...mapActions('user', ['accountLogin']),
    
    // 获取系统信息
    async getSystemInfo() {
      try {
        const systemInfo = await uni.getWindowInfo()
        this.statusBarHeight = systemInfo.statusBarHeight || 20
      } catch (error) {
        console.error('获取系统信息失败:', error)
        this.statusBarHeight = 20
      }
    },
    


    
    // 账号密码登录
    async handleAccountLogin() {
      if (!this.agreedToTerms) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none'
        })
        return
      }
      
      if (!this.accountForm.username || !this.accountForm.password) {
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        })
        return
      }
      
      this.accountLoginLoading = true
      
      try {
        // 调用账号密码登录API
        const userInfo = await this.accountLogin(this.accountForm)
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 检查用户是否已加入家庭
        setTimeout(() => {
          this.checkUserFamily()
        }, 1500)
        
      } catch (error) {
        console.error('账号密码登录失败:', error)
        uni.showToast({
          title: error.message || '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.accountLoginLoading = false
      }
    },
    
    // 忘记密码
    handleForgotPassword() {
      uni.showToast({
        title: '忘记密码功能开发中',
        icon: 'none'
      })
      // TODO: 跳转到忘记密码页面
      // uni.navigateTo({
      //   url: '/pages/forgot-password/forgot-password'
      // })
    },
    

    
    // 切换协议同意状态
    toggleAgreement() {
      this.agreedToTerms = !this.agreedToTerms
    },
    
    // 显示协议内容
    showAgreement(type) {
      const title = type === 'privacy' ? '隐私政策' : '用户协议'
      uni.navigateTo({
        url: `/pages/webview/webview?title=${title}&type=${type}`
      })
    },
    
    // 检查用户家庭状态
    checkUserFamily() {
      const userInfo = uni.getStorageSync('userInfo')
      
      if (userInfo && userInfo.familyId) {
        // 用户已加入家庭，跳转到首页
        uni.reLaunch({
          url: '/pages/index/index'
        })
      } else {
        // 用户未加入家庭，跳转到创建/加入家庭页面
        uni.reLaunch({
          url: '/pages/family/create'
        })
      }
    },
    
    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      })
    },

    // 快速登录测试
    quickLogin() {
      this.accountForm.username = 'admin'
      this.accountForm.password = '123456'
      this.handleAccountLogin()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: #fafafa;
  position: relative;
  overflow: hidden;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  
  .navbar-content {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      color: #1a1a1a;
    }
  }
}

.login-content {
  flex: 1;
  padding: 120rpx 32rpx 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-section {
  text-align: center;
  margin-bottom: 80rpx;
  
  .app-logo {
    width: 96rpx;
    height: 96rpx;
    border-radius: 12rpx;
    margin-bottom: 24rpx;
  }
  
  .app-title {
    display: block;
    font-size: 36rpx;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 80rpx;
    margin-bottom: 12rpx;
  }
  
  .app-subtitle {
    display: block;
    font-size: 24rpx;
    color: #7f8c8d;
  }
}

.form-section {
  .welcome-text {
    text-align: center;
    margin-bottom: 48rpx;
    
    .welcome-title {
      display: block;
      font-size: 32rpx;
      font-weight: 500;
      color: #2c3e50;
      margin-bottom: 12rpx;
    }
    
    .welcome-subtitle {
      display: block;
      font-size: 24rpx;
      color: #7f8c8d;
    }
  }
}



.account-login-section {
  padding: 32rpx;
  background: #ffffff;
  border-radius: 12rpx;
  border: 1px solid #f0f0f0;
  
  .form-item {
    margin-bottom: 24rpx;
    
    .form-input {
      width: 90%;
      height: 72rpx;
      padding: 0 24rpx;
      background: #fafafa;
      border: 1px solid #e0e0e0;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #2c3e50;
      
      &::placeholder {
        color: #95a5a6;
      }
      
      &:focus {
        background: #ffffff;
        border-color: #34495e;
      }
    }
  }
  
  .login-button {
    width: 100%;
    height: 72rpx;
    background: #34495e;
    border-radius: 8rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #ffffff;
    border: none;
    margin-top: 16rpx;
    
    &[disabled] {
      opacity: 0.6;
      background: #95a5a6;
    }
  }
  
  .forgot-password {
    text-align: center;
    margin-top: 24rpx;
    
    .forgot-text {
      font-size: 24rpx;
      color: #7f8c8d;
      text-decoration: underline;
    }
  }
}



.register-link {
  text-align: center;
  margin-top: 24rpx;
  
  .register-text {
    font-size: 24rpx;
    color: #34495e;
    text-decoration: underline;
  }
}

.agreement-section {
  margin-top: 48rpx;
  
  .agreement-checkbox {
    display: flex;
    align-items: flex-start;
    
    .custom-checkbox {
      width: 28rpx;
      height: 28rpx;
      border: 2px solid #e0e0e0;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12rpx;
      
      &.checked {
        background: #34495e;
        border-color: #34495e;
        
        .checkbox-icon {
          color: #ffffff;
          font-size: 16rpx;
          font-weight: bold;
        }
      }
    }
    
    .agreement-text {
      flex: 1;
      font-size: 22rpx;
      color: #7f8c8d;
      line-height: 1.5;
      
      .link-text {
        color: #34495e;
        text-decoration: underline;
      }
    }
  }
}

.footer-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  opacity: 0.3;
  
  .decoration-img {
    width: 100%;
    height: 100%;
  }
}

/* 按钮状态样式 */
button[loading] {
  opacity: 0.7;
}

button[disabled] {
  opacity: 0.5;
}

/* 表单样式覆盖 - 暂时注释掉 */
/* :deep(.u-form-item) {
  margin-bottom: 30rpx;
}

:deep(.u-input) {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
} */
</style> 